<template>
  <div id="app">
    <p>count {{ count }} 奇偶数?:{{ addOrEven }}</p>
    <button @click="addCount">+</button>
    <button @click="dleCount">-</button>
    <button @click="adda">奇数+</button>
    <button @click="addTime">延时+</button>
  </div>
</template>

<script>
//使用这些方法可以在组建中直接使用vuex中定义的数据和方法
import { mapState, mapActions, mapMutations, mapGetters } from "vuex";

export default {
  name: "App",
  state() {
    return {};
  },
  computed: {
    //mapState /mapGetter 是只读数据需要写在计算属性中
    ...mapState(["count"]),
    ...mapGetters(["addOrEven"]),
  },
  methods: {
    //方法定义在函数属性中
    ...mapActions(["addCount", "dleCount", "adda", "addTime"]),
    ...mapMutations(["ADDCOUNT", "DLECOUNT", "ADDA", "ADDTIME"]),
    /* addOne() {
      // this.$store.dispatch("addCount");
      //不需要使用actions 可以直接使用commit
      this.$store.commit("ADDCOUNT");
    },
    dleOne() {
      this.$store.dispatch("dleCount");
    },
    addAdd() {
      //可以给store传一个参数
      this.$store.dispatch("adda");
    },
    addTime() {
      this.$store.dispatch("addTime");
    }, */
  },
  components: {},
};
</script>

<style>
</style>
